<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.8.3.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            display: none;
            margin-left: 20px;
        }
    </style>
    <script>
        $(function(){
            $("p").click(function(){
                if($(this).next().children().css('display')=='none'){
                    $(this).next().children().slideDown();
                    $(this).siblings().each(function(){
                        $(this).next().children().slideUp();
                    });
                }else{
                    $(this).next().children().slideUp();
                }
            });
        });


    </script>
</head>
<body>
<p>主菜单一</p>
<ul>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
</ul>
<p>主菜单二</p>
<ul>
    <li>菜单四</li>
    <li>菜单五</li>
    <li>菜单六</li>
</ul>
<p>主菜单三</p>
<ul>
    <li>菜单七</li>
    <li>菜单八</li>
    <li>菜单九</li>
</ul>
</body>
</html>